<template>

	<el-row>
		<el-col :span="2">
			<div style="" />
		</el-col>
		<el-col :span="20">
			<el-card>
				

				<el-row>
					<el-col :span="12">
						<el-card style="height: 500px;">
							<el-image :src="this.imgUrl+this.pageData.img"></el-image>
						</el-card>
					</el-col>
					<el-col :span="12">
						<el-card>
							<h2 style="margin-left: 50px;">{{this.pageData.name}}</h2>
							<el-timeline>
								<el-timeline-item>
									<p style="margin: 5px;">类别:</p>
									<el-card style="height: 45px;">
										{{this.pageData.type}}
									</el-card>
								</el-timeline-item>
								<el-timeline-item>
									<p style="margin: 5px;">餐厅:</p>
									<el-card style="height: 45px;">
										{{this.pageData.restaurantName}}
									</el-card>
								</el-timeline-item>
								<el-timeline-item>
									<p style="margin: 5px;">餐厅地址:</p>
									<el-card style="height: 45px;">
										{{this.pageData.restaurantAddress}}
									</el-card>
								</el-timeline-item>
							</el-timeline>
						</el-card>

					</el-col>

				</el-row>
				
				<el-row>
					<el-card style="width: 100%;">
					<h3 style="text-align: left; font-family: Helvetica Neue; color: darksalmon; ">美食介绍：</h3>
					{{"\xa0\xa0\xa0\xa0\xa0\xa0"}}{{this.pageData.content}}
					</el-card>
				</el-row>


			</el-card>
		</el-col>
		<el-col :span="2">
			<div style="" />
		</el-col>
	</el-row>

</template>

<script>
	export default {
		data() {
			return {
				imgUrl: 'http://localhost:8080/img/',
				pageData: {
					id: '',
					name: '',
					type: '',
					content: '',
					restaurantName: '',
					restaurantAddress: '',
					img: ''
				},
			}
		},

		created() {
			this.load(this.$route.query.id);
		},

		methods: {
			load(id) {
				this.$api.get("/food/" + id).then((res) => {
					this.pageData = res.data.data;
				})
			}
		}
	}
</script>

<style>
</style>
